import React from 'react'
import { Card, Form, Select, Input, InputNumber, Space, Typography, Divider } from 'antd'
import { 
  CameraOutlined, 
  RotateLeftOutlined, 
  PlayCircleOutlined,
  ClockCircleOutlined
} from '@ant-design/icons'
import { 
  ShotType, 
  CameraAngle, 
  CameraMovement, 
  type StoryboardScene 
} from '../../../types/document'

const { Title, Text } = Typography
const { TextArea } = Input

export interface ShotEditorProps {
  scene: StoryboardScene
  onChange?: (updates: Partial<StoryboardScene>) => void
  disabled?: boolean
}

/**
 * 镜头编辑器组件
 * 用于编辑场景的镜头细节，包括景别、角度、运镜等
 */
export const ShotEditor: React.FC<ShotEditorProps> = ({
  scene,
  onChange,
  disabled = false
}) => {
  const [form] = Form.useForm()

  // 景别选项
  const shotTypeOptions = [
    { label: '特写 (CU)', value: ShotType.CLOSE_UP, desc: '人物面部或物体细节' },
    { label: '近景 (MS)', value: ShotType.MEDIUM_CLOSE, desc: '人物胸部以上' },
    { label: '中景 (MLS)', value: ShotType.MEDIUM, desc: '人物腰部以上' },
    { label: '中远景 (MLS)', value: ShotType.MEDIUM_LONG, desc: '人物膝盖以上' },
    { label: '远景 (LS)', value: ShotType.LONG, desc: '人物全身' },
    { label: '全景 (ELS)', value: ShotType.EXTREME_LONG, desc: '大环境场景' }
  ]

  // 拍摄角度选项
  const cameraAngleOptions = [
    { label: '平视', value: CameraAngle.EYE_LEVEL, desc: '与目标等高拍摄' },
    { label: '俯视', value: CameraAngle.HIGH_ANGLE, desc: '从上往下拍摄' },
    { label: '仰视', value: CameraAngle.LOW_ANGLE, desc: '从下往上拍摄' },
    { label: '荷兰角', value: CameraAngle.DUTCH_ANGLE, desc: '倾斜角度拍摄' },
    { label: '鸟瞰', value: CameraAngle.BIRD_EYE, desc: '垂直向下拍摄' },
    { label: '虫瞰', value: CameraAngle.WORM_EYE, desc: '垂直向上拍摄' }
  ]

  // 镜头运动选项
  const cameraMovementOptions = [
    { label: '固定', value: CameraMovement.STATIC, desc: '镜头静止不动' },
    { label: '推镜', value: CameraMovement.PUSH_IN, desc: '镜头向前推进' },
    { label: '拉镜', value: CameraMovement.PULL_OUT, desc: '镜头向后拉远' },
    { label: '摇镜', value: CameraMovement.PAN, desc: '水平左右摇摆' },
    { label: '倾斜', value: CameraMovement.TILT, desc: '垂直上下倾斜' },
    { label: '跟随', value: CameraMovement.FOLLOW, desc: '跟随目标移动' },
    { label: '环绕', value: CameraMovement.ORBIT, desc: '围绕目标转动' },
    { label: '升降', value: CameraMovement.CRANE, desc: '垂直升降运动' }
  ]

  // 处理字段更新
  const handleFieldChange = (field: string, value: any) => {
    const updates: Partial<StoryboardScene> = {}
    
    if (field.startsWith('shot.')) {
      const shotField = field.replace('shot.', '')
      updates.shot = { ...scene.shot, [shotField]: value }
    } else if (field.startsWith('timing.')) {
      const timingField = field.replace('timing.', '')
      updates.timing = { ...scene.timing, [timingField]: value }
    } else {
      updates[field as keyof StoryboardScene] = value
    }
    
    onChange?.(updates)
  }

  // 自定义选项渲染
  const renderOption = (option: any) => (
    <div style={{ padding: '4px 0' }}>
      <div style={{ fontWeight: 500 }}>{option.label}</div>
      <Text type="secondary" style={{ fontSize: '12px' }}>
        {option.desc}
      </Text>
    </div>
  )

  return (
    <Card 
      title={
        <Space>
          <CameraOutlined />
          <span>镜头设置</span>
        </Space>
      }
      variant="borderless"
    >
      <Form
        form={form}
        layout="vertical"
        disabled={disabled}
        initialValues={{
          'shot.type': scene.shot?.type || ShotType.MEDIUM,
          'shot.angle': scene.shot?.angle || CameraAngle.EYE_LEVEL,
          'shot.movement': scene.shot?.movement || CameraMovement.STATIC,
          'shot.description': scene.shot?.description || '',
          'timing.duration': scene.timing?.duration || scene.duration || 5,
          'content': scene.content || ''
        }}
      >
        {/* 基础镜头设置 */}
        <Title level={5}>
          <CameraOutlined /> 镜头构图
        </Title>
        
        <Space direction="vertical" style={{ width: '100%' }} size="middle">
          <Form.Item
            label="景别选择"
            name="shot.type"
            tooltip="选择镜头的景别类型，决定画面的取景范围"
          >
            <Select
              placeholder="选择景别"
              onChange={(value) => handleFieldChange('shot.type', value)}
            >
              {shotTypeOptions.map(option => (
                <Select.Option key={option.value} value={option.value}>
                  {renderOption(option)}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>

          <Form.Item
            label="拍摄角度"
            name="shot.angle"
            tooltip="选择摄像机相对于被摄物体的角度"
          >
            <Select
              placeholder="选择拍摄角度"
              onChange={(value) => handleFieldChange('shot.angle', value)}
            >
              {cameraAngleOptions.map(option => (
                <Select.Option key={option.value} value={option.value}>
                  {renderOption(option)}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>

          <Form.Item
            label="镜头运动"
            name="shot.movement"
            tooltip="选择镜头的运动方式"
          >
            <Select
              placeholder="选择镜头运动"
              onChange={(value) => handleFieldChange('shot.movement', value)}
            >
              {cameraMovementOptions.map(option => (
                <Select.Option key={option.value} value={option.value}>
                  {renderOption(option)}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
        </Space>

        <Divider />

        {/* 时长设置 */}
        <Title level={5}>
          <ClockCircleOutlined /> 时长设置
        </Title>

        <Form.Item
          label="镜头时长"
          name="timing.duration"
          tooltip="设置此镜头的持续时间（秒）"
        >
          <InputNumber
            min={0.1}
            max={300}
            step={0.1}
            precision={1}
            style={{ width: '100%' }}
            placeholder="镜头时长（秒）"
            onChange={(value) => handleFieldChange('timing.duration', value || 5)}
            addonAfter="秒"
          />
        </Form.Item>

        <Divider />

        {/* 内容描述 */}
        <Title level={5}>
          <PlayCircleOutlined /> 画面内容
        </Title>

        <Form.Item
          label="镜头描述"
          name="shot.description"
          tooltip="详细描述此镜头的画面内容、动作等"
        >
          <TextArea
            rows={3}
            placeholder="描述镜头中的画面内容、人物动作、场景细节等..."
            onChange={(e) => handleFieldChange('shot.description', e.target.value)}
            showCount
            maxLength={500}
          />
        </Form.Item>

        <Form.Item
          label="场景内容"
          name="content"
          tooltip="整个场景的详细内容描述"
        >
          <TextArea
            rows={4}
            placeholder="描述整个场景的内容，包括对话、动作、环境等..."
            onChange={(e) => handleFieldChange('content', e.target.value)}
            showCount
            maxLength={1000}
          />
        </Form.Item>
      </Form>
    </Card>
  )
}

export default ShotEditor